<template>
  <div class="RankView">
    <Home_head></Home_head>
    <div class="RankingList">
        <div style="margin-bottom: 40px;text-align: center;"><h1 style="padding-top: 20px;">排行榜</h1></div>
        <div class="Rankinfo">
                <span>排名</span>
                <span style="margin-left: 30px;">用户</span>
                <span style="margin-left: 120px;">提交次数</span>
                <span style="margin-left: 30px;">通过次数</span>
                <span style="margin-left: 30px;">通过率</span>
        </div>
        <div v-for="count1 in 10" :key="count1">
            <div class="Rankuser">
                <span style="margin-left: 20px;">第{{count1}}名</span> 
                <img :src="RankList[count1-1].userHead" class="img_1">
                <span class="span_1" >{{ RankList[count1-1].userName }}</span>
                <span class="span_2" >{{ RankList[count1-1].submitNum }}次</span>
                <span class="span_3" >{{ RankList[count1-1].successesNum }}次</span>
                <span class="span_4" >{{ RankList[count1-1].successRate }}</span> 
            </div>
        </div>
        <div style="width: 100%; border-top: #53a9d1 1px solid;" v-if="ismore" @click="showMore()">
            <span style="margin: 177px; color: #53a9d1;">点击查看更多</span>
        </div>
        <div v-for="count2 in RankList.length-10" :key="count2" >
            <div class="Rankuser" v-if="!ismore">
                <span style="margin-left: 20px;">第{{count2+10}}名</span> 
                <img :src="RankList[count2+9].userHead" class="img_1">
                <span class="span_1" >{{ RankList[count2+9].userName }}</span>
                <span class="span_2" >{{ RankList[count2+9].submitNum }}次</span>
                <span class="span_3" >{{ RankList[count2+9].successesNum }}次</span>
                <span class="span_4" >{{ RankList[count2+9].successRate }}</span> 
            </div>
        </div>
        <div style="width: 100%; border-top: #53a9d1 1px solid;" v-if="!ismore">
            <span style="margin: 160px; color: #53a9d1;">最多显示前五十名噢~</span>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Home_head from '../components/Home_head.vue'
export default {
    components: { Home_head },
    data(){
        return{
            RankList:[],
            ismore:true,
        }
    },
    created(){
        this.getTop();
    },
    methods:{
        getTop(){
            axios.post("/TopRank").then((response) =>
            {
                this.RankList=response.data
            })
        },
        showMore(){
            this.ismore=false;
        }
    },
}
</script>

<style>
.RankingList{
    margin: 45px auto;
    background: #fff;
    width: 450px;
    padding-bottom: 50px;
    }
.Rankuser{
    display: flex;
      /* 水平垂直居中 */
      align-items: center;
      position: relative;
      margin-top: 10px;
      margin-bottom: 20px;
}
.Rankuser .img_1{
    width: 30px; 
    height: 30px; 
    border-radius: 50%;
    position: absolute;
    left: 75px;
}
.Rankuser .span_1{
    position: absolute;
    left: 107px;
}
.Rankuser .span_2{
    position: absolute;
    left: 225px;
}
.Rankuser .span_3{
    position: absolute;
    left: 310px;
}
.Rankuser .span_4{
    position: absolute;
    left: 394px;
}
.Rankinfo{
    width: 100%; 
    height: 38px; 
    background-color: #eee; 
    display: flex; 
    align-items: center;
}  
.Rankinfo span{
    margin-left: 20px;
}  
</style>